<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./点击轮播style.css">
</head>
<body>
    <div class="box">
      <img src="./轮播图images/hzw01.jpg" alt="">
    <div class="bottom">
      <p>日斜归路晚霞明</p>
      <ul class="bottom-ul" >
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
        <div class="anniu">
          <button class="leftL">&lt;</button>
          <button class="rightR">&gt;</button>
        </div>
    </div>
  </div>
    <script>
        const sliderData = [
      { url: './轮播图images/hzw01.jpg', title: '日斜归路晚霞明', color: 'rgb(100, 67, 68)' },
      { url: './轮播图images/hzw02.jpg', title: '落霞与孤鹜齐飞', color: 'rgb(43, 35, 26)' },
      { url: './轮播图images/hzw03.jpg', title: '朱城出晚霞', color: 'rgb(36, 31, 33)' },
      { url: './轮播图images/hzw04.jpg', title: '孤村落日残霞', color: 'rgb(255, 166, 0, 0.411)' },
      { url: './轮播图images/hzw05.jpg', title: '山村落日梦悠悠', color: 'rgb(67, 90, 92)' },
      { url: './轮播图images/hzw06.jpg', title: '长歌尽落日，乘月归田庐', color: 'rgb(166, 131, 143)' },
      { url: './轮播图images/hzw07.jpg', title: '白云出岫本无心', color: 'rgb(53, 29, 25)' },
      { url: './轮播图images/hzw08.jpg', title: '青轩秘晚霞', color: 'rgb(99, 72, 114)' },
    ]
    const img = document.querySelector('.box img')
    const p = document.querySelector('.bottom p')
    const bottom = document.querySelector('.bottom')
    const rightR = document.querySelector('.rightR')
    let i = 0
    rightR.addEventListener('click',function(){
        i++
        i = i >= sliderData.length ? 0 : i
        img.src = sliderData[i].url
        anniu()
    })
    const leftL = document.querySelector('.leftL')
    leftL.addEventListener('click',function(){
        i--
        i = i < 0 ? sliderData.length - 1 : i
        img.src=sliderData[i].url
        anniu()
    })
    function anniu(){
        img.src=sliderData[i].url
        p.innerHTML =sliderData[i].title
        bottom.style.backgroundColor=sliderData[i].color
        document.querySelector('.bottom-ul .active').classList.remove('active')
        document.querySelector(`.bottom-ul li:nth-child(${i+1})`).classList.add('active')
    }
    let timer=setInterval(function(){
        rightR.click()
    },2000)
    const box=document.querySelector('.box')
    box.addEventListener('mouseenter',function(){
        clearInterval(timer)
    })
      box.addEventListener('mouseleave',function(){
        clearInterval(timer)
        timer=setInterval(function(){
        rightR.click()
    },2000)
    })
    </script>
</body>
</html>